import {StyleSheet, View} from 'react-native';
import {BlurView} from '@react-native-community/blur';
import {
  BgImg,
  GridThree,
  ObserverText,
  ObserverView,
} from '../../../components';
import {BindItem, BtnItem} from '../../../mobx/home';
import {useState} from 'react';
import {dpmain, dpw10, dpw12, dpw14, dpw4} from '../../../constants';

interface ModelFourProps {
  list: {
    BindList: BindItem[];
    Describe: string;
    DetailImage: string;
    IconImage: string;
    Id: number;
    Title: string;
  }[];
  Title: string;
  btnList: BtnItem[];
  navigation?: any;
  typeId?: number;
}

const ModelFour = (props: ModelFourProps) => {
  const {list, Title, btnList, navigation, typeId} = props;
  const [actId, setActId] = useState(0);

  const changeActId = (id: number) => {
    if (actId !== id) {
      setActId(id);
    }
  };

  const goRank = () => {
    if (navigation) {
      navigation.navigate('rank', {typeId, rankId: list[actId]?.Id});
    }
  };

  return (
    <ObserverView>
      <View style={styles.titles}>
        <View style={styles.titlebox}>
          {list.map((it, idx) => (
            <ObserverText
              style={styles.title}
              key={it.Id}
              tKey={it.Title}
              isActive={actId === idx}
              type="tab-title"
              onPress={() => {
                changeActId(idx);
              }}
            />
          ))}
        </View>
        {Array.isArray(btnList) && btnList.length > 0
          ? btnList.map((it, idx) => (
              <ObserverText
                onPress={goRank}
                key={it.BtnId + 'btn2' + idx}
                tKey={`${it.Title} >`}
                type="desc"
              />
            ))
          : null}
      </View>
      <BgImg style={styles.conbg} url={list[actId]?.BindList[0]?.CoverUrl}>
        <BlurView
          style={styles.conmask}
          blurType="dark"
          blurAmount={100}
          reducedTransparencyFallbackColor="dark"
        />
        <GridThree
          list={list[actId]?.BindList}
          type={2}
          navigation={navigation}
        />
      </BgImg>
    </ObserverView>
  );
};

export default ModelFour;

const styles = StyleSheet.create({
  titles: {
    flexDirection: 'row',
    width: dpmain,
    marginHorizontal: 'auto',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  titlebox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  title: {
    paddingVertical: dpw10,
    paddingHorizontal: dpw4,
  },
  conbg: {
    paddingHorizontal: dpw12,
    paddingTop: dpw14,
    zIndex: 1,
    marginHorizontal: 'auto',
    overflow: 'hidden',
  },
  conmask: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
  },
});
